<template>
  <div id="app" class="outer">
      <div class="context" ref="context">
        <div>
          <el-row>
            <el-button type="primary" size="mini" @click="onConfirm(tableChecked)">{{ $t('shellAssets.btnText.confirmBtnText') }}</el-button>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6">
              <div>
                <!--  :data="treeData" -->
                <!-- :check-strictly="true" -->
                <!-- :load="loadNode1" -->
                <!-- lazy -->
                <!-- :default-checked-keys="checkedKeys" -->
                <el-tree
                  node-key="id"
                  ref="tree"
                  :key="treeKey" 
                  :expand-on-click-node="false"
                  :default-expand-all="true"
                  :show-checkbox="true" 
                  :props="props1"
                  :data="treeData"
                  >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                  </span>
                </el-tree>
              </div>
            </el-col>

          </el-row>
        </div>
      </div>

  </div>
</template>

<script>
let id = 1000;
import comBaseVue from "../../baseViewModel";
import { promises } from 'fs';

export default {
  mixins: [comBaseVue],
  props:{
    menuCode:String,
    checkedKeys: null
  },
  data() {
    const data = [
        {
          id: 1,
          label: "资产分类",
        }
      ];
    return {
      props1: {
          id: "id",
          label: 'label',
          children: 'children',
          isLeaf: 'leaf'
        },
      loading: false,
      tableChecked: [],
      treeKey: "",
      tableHeight: 100,
       appDivStyle:{
            height:this.$store.getters.appHeight,
        },
      modelName: "com.ispr.iptv.entity.media.CapitalEntity",

      treeData:[],
      isOne: true,
    };
  },

  methods: {

    loadNode1(node, resolve) {
        let _this = this;
      // console.log(node, resolve);
        if (node.level === 0) {
          return resolve([{ label: '资产分类',id:'root' }]);
        }

        if (node.level == 1 || node.level == 2) {
            let requestArgs = {
                commandCode: "QueryTreeDataProc",
                className: "com.ispr.iptv.entity.media.CapitalEntity",
                commandArgs: "Default",
                commandBody: { "pCapitalCode":node.data.id},
                params: null,
                userInfo: this.getUserInfo()
            };

            this.axios.post('/api/execute', requestArgs, {headers: this.headersObj})
                .then(function(res) {
                    if (res.data.code == "SUCCESS") {
                        _this.treeData = [];
                        _this.treeData = res.data.data;
                        return resolve(_this.treeData);
                    } else {
                        _this.setTableData.call(_this, false, res.data);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                    _this.setTableData.call(_this, false, "serverError");
                });
        }else{
          return resolve([]);
        }

      },

      //查询资产分类树数据
      queryTreeData(checkedKeys){
            let _this = this;
            let requestArgs = {
                commandCode: "QueryTreeDataProc",
                className: "com.ispr.iptv.entity.media.CapitalEntity",
                commandArgs: "Default",
                commandBody: { "pCapitalCode":"root"},
                params: null,
                userInfo: this.getUserInfo()
            };
            this.$refs.tree.setCheckedKeys([]);
            this.axios.post('/api/execute', requestArgs, {headers: this.headersObj})
                .then(function(res) {
                    if (res.data.code == "SUCCESS") {
                        _this.treeData = [];
                        _this.treeData = [{ label: '资产分类',id:'root' ,"children": res.data.data}];

                        //console.log('checkedKeys===============>',checkedKeys);
                        
                        var that = _this;
                        setTimeout(function(){
                          checkedKeys.forEach((i,n) => {
                            var node = that.$refs.tree.getNode(i);
                            //console.log(node.label+"===>"+node.isLeaf)
                            if(node.isLeaf){
                              that.$refs.tree.setChecked(node, true);
                            }
                          });
                        },100);
                    } else {
                        _this.setTableData.call(_this, false, res.data);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                    _this.setTableData.call(_this, false, "serverError");
                });
      },

//确定按钮事件
    onConfirm: function(){
      let nodes = [];
      this.tableChecked = [];
      nodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
      // nodes = this.$refs.tree.getCheckedNodes();
      nodes.forEach(element => {
          if(element.id!="root"){
            this.tableChecked.push(element);
          }
      });
      this.isOne = false;
      this.$emit("capitalChoose",this.tableChecked,this.isShowChoose);
    },

    // updateCheckedKeys: function(checkedKeys) {
    //   console.log('checkedKeys===============>',checkedKeys);
    //   if(!this.isOne){
    //     this.$refs.tree.setCheckedKeys([]);
    //   }
    //   var that = this;
    //   checkedKeys.forEach((i,n) => {
    //     var node = that.$refs.tree.getNode(i);
    //     console.log(node.isLeaf)
    //     if(node.isLeaf){
    //       that.$refs.tree.setChecked(node, true);
    //     }
    //   });
    // },

  },
  mounted: function mounted() {
    console.log('checkedKeys1===============>',this.checkedKeys);
    this.queryTreeData(this.checkedKeys)
  },
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  color: #333333;
}
     
.outer{
    width: 100%;
    height:500px !important;
    overflow:auto;
  }
</style>
